<template>
  <view class="container">
  
    <!-- Logo区域 -->
    <view class="logo-section">
      <view class="logo-circle">
        <image class="logo-image" src="/static/uniAppLogo.png" mode="aspectFit"></image>
      </view>
      <text class="logo-text">笑游</text>
      <view class="loading-dots">
        <view class="loading-dot"></view>
        <view class="loading-dot"></view>
        <view class="loading-dot"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 数据
    }
  },
  methods: {
    // 方法
  }
}
</script>

<style>
.container {
  width: 750rpx;
  height: 100vh;
  background: white;
  display: flex;
  align-items: center;       /* 垂直居中 */
  justify-content: center;    /* 水平居中 */
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo-circle {
  width: 152rpx;
  height: 152rpx;
  background: #2F6EF5;
  border-radius: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo-dots {
  display: flex;
  gap: 16rpx;
  margin-bottom: 10rpx;
}

.dot {
  width: 18.26rpx;
  height: 18.26rpx;
  background: white;
  border-radius: 50%;
}

.logo-image {
  background-color: #2F6EF5;
  width: 80.7rpx;
  height: 74.78rpx;
}

.logo-text {
  font-size: 24rpx;
  color: black;
  margin-top: 26rpx;
  font-weight: 400;
}

.loading-dots {
  display: flex;
  gap: 22rpx;
  margin-top: 10rpx;
}

.loading-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  animation: blink 1.2s infinite ease-in-out;
}

/* 定义闪烁动画 */
@keyframes blink {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

.loading-dot:nth-child(1) { background: #E5E5E5;  animation-delay: 0s; }
.loading-dot:nth-child(2) { background: #CCCCCC;  animation-delay: 0.4s;}
.loading-dot:nth-child(3) { background: #9A9A9A;  animation-delay: 0.8s;}
</style>